<template>
  <div class=" height100 scrollWrapper positionR">
    <div class="positionA top0 PTB10 width100 textC " v-show='pullrefresh&&scrollY>0'>
      <div class="loading" ref="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <p class="MT5" v-show="!isFreshing">松手刷新...</p>
      <p class="MT5" v-show="isFreshing">正在刷新...</p>
    </div>
    <div class="positionA bottom0  PTB10 width100  textC loadingMore flex">
      <div class="flex" v-show='pullUp&&isLoadingMore&&!all'>
        <div class="loading animate flex1">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="blackTex MT15">数据加载中...</span>
      </div>
      <span v-show='all' class="blackTex">没有更多数据啦！</span>
    </div>
    <div ref="wrapper" class="height100">
      <div :class="{paddingB:!isLoadingMore}">
        <slot></slot>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
import { addClass, removeClass } from '@/common/js/dom'
export default {
  props: {
    probeType: {
      type: Number,
      default: 0
    },
    click: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default: {}
    },
    listenScroll: {
      type: Boolean,
      default: false
    },
    pullrefresh: {
      type: Boolean,
      default: false
    },
    pullUp: {
      type: Boolean,
      default: false
    },
    isAll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFreshing: false,
      isLoadingMore: false,
      scrollY: 0,
      all: false
    }
  },
  // computed: {
  //   all() {
  //     return this.isAll
  //   }
  // },
  mounted() {
    setTimeout(() => {
      this._initScroll()
    }, 20)
  },
  methods: {
    _initScroll() {
      if (!this.$refs.wrapper) {
        return
      }
      let options = {
        probeType: this.probeType,
        click: this.click
      }
      if (this.pullrefresh) {
        options = Object.assign(options, {
          pullDownRefresh: {
            stop: this.pullrefresh ? 70 : 0,
            threshold: 70
          }
        })
      }
      if (this.pullUp) {
        options = Object.assign(options, {
          pullUpLoad: {
            threshold: -20
          }
        })
      }
      if (this.pullUp && this.pullrefresh) {
        options = Object.assign(options, {
          pullDownRefresh: {
            stop: this.pullrefresh ? 70 : 0,
            threshold: 70
          },
          pullUpLoad: {
            threshold: -20
          }
        })
      }
      this.scroll = new BScroll(this.$refs.wrapper, options)
      var timer = null
      if (this.pullrefresh) {
        this.scroll.on('pullingDown', () => {
          addClass(this.$refs.loading, 'animate')
          this.isFreshing = true
          this.$emit('fresh', 1)
          clearTimeout(timer)
          timer = setTimeout(() => {
            this.finishPullDown()
          }, 5000)
        })
      }
      if (this.pullUp) {
        this.scroll.on('pullingUp', (v) => {
          this.$emit('loadMore', this.nextPage)
          this.isLoadingMore = true
        })
      }

      if (this.listenScroll) {
        this.scroll.on('scroll', (pos) => {
          this.scrollY = pos.y
          this.$emit('scroll', pos)
          console.log(options)
        })
      }
    },
    finishPullDown() {
      this.scroll.finishPullDown()
      removeClass(this.$refs.loading, 'animate')
      this.isFreshing = false
      this.refresh()
    },
    finishPullUp() {
      this.scroll.finishPullUp()
      this.isLoadingMore = false
      // this.all = true
      this.refresh()
    },
    enable() {
      this.scroll && this.scroll.enable()
    },
    disable() {
      this.scroll && this.scroll.disable()
    },
    refresh() {
      setTimeout(() => {
        this.scroll && this.scroll.refresh()
      }, 80)
    },
    stop() {
      this.scroll && this.scroll.stop()
    },
    scrollTo() {
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    scrollToElement() {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    }
  },
  watch: {
    // data(v) {
    //   console.log(v)
    //   setTimeout(() => {
    //     this.refresh()
    //   }, 20)
    // },
    // 'data.current': {
    //   handler: function (val, oldVal) {
    //     console.log(val)
    //     setTimeout(() => {
    //       this.refresh()
    //     }, 20)
    //   },
    //   deep: true
    // }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.loading
  width 80px
  height 40px
  margin 0 auto
  // margin-top 10px
  transform scale(0.4)
.loading span
  display inline-block
  width 8px
  height 100%
  border-radius 4px
  background lightgreen
.animate span
  animation load 1s ease infinite
  -webkit-animation load 1s ease infinite
@keyframes load
  0%, 100%
    height 40px
    background lightgreen
  50%
    height 70px
    margin -15px 0
    background lightblue
.loading span:nth-child(2)
  -webkit-animation-delay 0.2s
.loading span:nth-child(3)
  -webkit-animation-delay 0.4s
.loading span:nth-child(4)
  -webkit-animation-delay 0.6s
.loading span:nth-child(5)
  -webkit-animation-delay 0.8s
.loadingMore
  z-index 0
  // background rgba(0, 0, 0, 0.5)
  align-items center
  justify-content center
  .loading
    margin 0 auto
    transform scale(0.3)
.paddingB
  padding-bottom 40px
</style>
